<template>
	<div id="app">
		<!--内容部分-->
		<keep-alive>
			<router-view v-if="$route.meta.keepAlive" />
		</keep-alive>

		<router-view v-if="!$route.meta.keepAlive" />

		<!--回到顶部-->
		<div class="scrollTop" :class="[{ show: isShowScrollTop }]" @click="backTop">
			<i class="iconfont icon-huidaodingbu"></i>
		</div>

		<!--底部导航-->
		<footer-bar ref="footBar" v-if="isShowFooterBar"></footer-bar>

		<!-- 引导 -->
		<guide-demo ref="guide"></guide-demo>
	</div>
</template>

<script>
import router from './router';
import { FooterBar } from './components';
import { mapGetters } from 'vuex';
import GuideDemo from '@/components/guide';
import store from 'store';
import $ from 'jquery';

export default {
	components: {
		FooterBar,
		GuideDemo
	},
	data() {
		return {
			isShowScrollTop: false
		};
	},
	created() {
		// 每次进入授权登录
		this.$store.dispatch('LOGIN');
		console.log(this.$route);
		this.getRequest();
	},
	computed: {
		...mapGetters(['token']),

		// 是否显示底部栏
		isShowFooterBar() {
			let path = this.$route.path;
			if (path === '/' || path.includes('h5') || path === '/search-coupon' || path === '/course-list' || path === '/member-center') {
				return true;
			} else {
				return false;
			}
		}
	},
	mounted() {
		this.$store.dispatch('SEARCH', false);
		this.$store.dispatch('JDSEARCH', false);

		window.addEventListener('scroll', () => {
			let top = $(document).scrollTop();

			if (top >= 350) {
				this.isShowScrollTop = true;
			} else {
				this.isShowScrollTop = false;
			}
			if (top >= 140) {
				this.$store.dispatch('SEARCH', true);
			} else {
				this.$store.dispatch('SEARCH', false);
			}
			if (top >= 160) {
				this.$store.dispatch('JDSEARCH', true);
			} else {
				this.$store.dispatch('JDSEARCH', false);
			}
		});
	},
	methods: {
		// 回到顶部
		backTop() {
			$(document).scrollTop(0, 300);
		},
		getRequest() {
			let url = location.search; //获取url中"?"符后的字串
			console.log(url);
			if (url) {
				let theRequest = new Object();
				if (url.indexOf('?') != -1) {
					let str = url.substr(1);
					let strs = str.split('&');
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1]);
					}
				}
				let userId = store.get('userIdStatistics') || '';
				this.$service.wechatApplet.index
					.addVisitRecordUnAuthorized({
						app: theRequest.app,
						channelId: theRequest.channel,
						sdkType: theRequest.sdkType,
						userId
					})
					.then(res => {
						store.set('userIdStatistics', res.userId);
					})
					.catch(err => {
						console.error(err);
					});
			}
		}
	}
};
</script>

<style lang="scss">
@import './assets/scss/index.scss';

html,
body {
	width: 100%;
	font-family: PingFangSC-Regular, PingFang SC, sans-serif;
	background: $bg-grey-default;

	#app {
		display: flex;
		flex-direction: column;
	}

	.container {
		position: relative;
	}
}

img {
	width: 100%;
}
@keyframes animate_in {
	0% {
		right: -6px;
	}
	50% {
		right: 0;
	}
	100% {
		right: -6px;
	}
}

.rule-popup {
	width: 600px;
	border-radius: 16px;
	padding: 50px 40px;
	.main {
		h2 {
			font-size: 32px;
			text-align: center;
			margin-bottom: 50px;
			color: #383434;
		}
		.rule {
			max-height: 600px;
			overflow: auto;
			font-size: 26px;
			color: #616161;
			margin-bottom: 10px;
			line-height: 1.6;
		}
	}
}
</style>
